<template>
  <div class="nav-container">
    <div class="nav" v-if="!isSearchVisible">
      <router-link to="/">主页</router-link>
      <router-link to="/channel">频道列表</router-link>
      <router-link to="/My">我的</router-link>
      <button @click="showSearch"><i class="icon-search"></i></button>
    </div>
    <div class="search-container" v-else>
      <div class="search-bar">
        <input type="text" class="search-input" placeholder="请输入搜索内容" v-model="searchText" @keyup="performSearch" />
        <button class="cancel-btn" @click="cancelSearch">取消</button>
      </div>
      <div class="filter-menu">
        <div class="filter-item">影片 ▼</div>
        <div class="filter-item">默认排序 ▼</div>
        <div class="filter-item">全部频道 ▲</div>
      </div>
      <div class="channel-list">
        <div class="channel-tag" v-for="channel in filteredChannels" :key="channel">{{ channel }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 控制是否显示搜索界面
const isSearchVisible = ref(false);
const searchText = ref('');

// 搜索框输入状态
const searchActive = ref(false);

// 搜索关于频道的数据
const channels = ref([
  '全部频道',
  '创意',
  '励志',
  '搞笑',
  '运动',
  '旅行',
  '爱情',
  '广告',
  '动画',
  '剧情',
  '音乐',
  '科幻',
  '纪录',
  '预告',
  '混剪',
  '实验',
  '生活',
  '时尚',
  '汽车',
  '游戏',
  '美食'
]);

const filteredChannels = ref([...channels.value]);

// 显示搜索界面
const showSearch = () => {
  isSearchVisible.value = true;
  searchActive.value = true;
};

// 取消搜索
const cancelSearch = () => {
  isSearchVisible.value = false;
  searchText.value = '';
  filteredChannels.value = [...channels.value];
  searchActive.value = false;
};

// 执行搜索
const performSearch = () => {
  if (searchText.value.trim() === '') {
    filteredChannels.value = [...channels.value];
  } else {
    filteredChannels.value = channels.value.filter(channel =>
      channel.toLowerCase().includes(searchText.value.toLowerCase())
    );
  }
};

// 监听搜索文本变化
watch(searchText, () => {
  performSearch();
});
</script>

<style lang="scss" scoped>
.nav-container {
  width: 410px;
  position: fixed;
  top: 20px;
  z-index: 999;
}
  .icon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.57 16 11.11 16 9.5 16 5.91 12.09 3 8 3 3.91 3 1 5.91 1 9.5S3.91 16 8 16c1.61 0 3.14-1.05 3.95-2.63l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5s-1.99 4.5-4.5 4.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 8px;
  }

.nav {
  display: flex;
  justify-content: space-around;
  background-color: #2c3e50;
  line-height: 60px;
  border-radius: 30px 30px 0 0;

  a {
    color: white;
    text-decoration: none;
  }

  button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
  }
}

.search-container {
  background-color: #2c3e50;
  border-radius: 30px 30px 0 0;
  padding: 10px;

  .search-bar {
    display: flex;
    margin: 10px;

    .search-input {
      width: 300px;
      height: 36px;
      border: none;
      border-radius: 18px;
      outline: none;
      font-size: 14px;
      padding: 0 10px;
      background-color: white;
      transition: background-color 0.3s;
    }

    .search-input:focus {
      background-color: #f0f0f0;
    }

    .cancel-btn {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 14px;
      align-self: center;
      margin-left: 10px;
    }
  }

  .filter-menu {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    font-size: 14px;
    color: white;

    .filter-item {
      cursor: pointer;
    }
  }

  .channel-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;

    .channel-tag {
      background-color: #333;
      padding: 5px 10px;
      border-radius: 5px;
      text-align: center;
      font-size: 12px;
      color: white;
      cursor: pointer;
    }
  }
}
</style>